<template>
  <div>
    <div class="box" >
        <img :src="img" alt="">
        <ul>
            <li>{{name}}</li>
            <li style="font-size:12px">{{title}}</li>
            <li style="margin-top:10px"><van-progress pivot-text="50" color="#f2826a" :percentage="50" /></li>
            <ul class="second">
                <li style="margin-left:-30px;margin-top:30px;color:red">{{price}}</li>
                <li style="margin-left:146px;margin-top:30px"><button style="background-color:rgb(243, 167, 77);font-size:13px;color:white;border:none">立即支持</button></li>
            </ul>
        </ul>
    </div>
  </div>
</template>

<script>
export default {
    props:["img","name","title","price"]

}
</script>

<style scoped>
.second{
    display: flex;
    justify-content: space-between;
}
    img{
        width:115px;
        height:115px
    }
    .box{
        display: flex;
    }
    .box ul li{
        margin-top: 5px;
    }
    .box ul{
        margin-left: 15px;
    }
</style>